<template lang="html">
  <chart
    class="x-cloud"
    :chartid='chartId'
    :option = 'options'
    :title='title'
  >
  </chart>
</template>

<script>
import chart from './chart.vue'
export default {
  components : {
    chart,
  },
  props : {
    chartId :{
      type : String,
    },
    title : {
      type : String,
    },
    data : {
      type : Object,
    },
    wordData:{
    	type:Array,
    }
  },
  data(){
    return {
      count : 200,
      options : {
            series: [{
            type: 'wordCloud',
            shape: 'smooth',
            // maskImage: maskImage,
            left: 'center',
            top: 'center',
            width: '90%',
            height: '90%',
            right: null,
            bottom: null,
            sizeRange: [12, 80],
            rotationRange: [0, 0],
            rotationStep: 90,
            gridSize: 8,
            drawOutOfBound: false,
            textStyle: {
                normal: {
                    fontFamily: 'sans-serif',
                    fontWeight: 'bold',
                    // Color can be a callback function or a color string
                    color: function () {
                        // Random color
                        return 'rgb(' + [
                            Math.round(120 + Math.random() * 120),
                            Math.round(Math.random() * 200),
                            Math.round(30+ Math.random() * 20)
                        ].join(',') + ')';
                    }
                },
                // emphasis: {
                //     shadowBlur: 10,
                //     shadowColor: '#333'
                // }
            },
            data: [
              // {
              //   name: '销售',
              //   value: 366,
              // },
              // {
              //   name: '生产',
              //   value: 32,
              // },
              // {
              //   name: '测试',
              //   value: 200,
              // },
            ]
        }]
      }
      }
    },
    watch:{
    	wordData(val){
    		this.options.series[0].data =val;
    	}
    }
}
</script>

<style lang="scss" scoped>
    .x-cloud{
      height: 100%;
    }
</style>
